<template>
  <div class="SARBody display-flex flex-direction-column">
    <div
      class="header display-flex flex-direction-row align-items-center justify-content-flex-justify"
    >
      <img @click="goBack" src="../../../assets/img/order/close.png" alt />
      <input
        class="searchInput"
        type="text"
        @focus="showKeyFn"
        :placeholder="searchIcon"
        v-model="searchKeyword"
        @input="inputChange"
      />
      <span @click="initData">搜索</span>
    </div>
    <p class="hr"></p>
    <div class="resultBox">
      <div v-if="showKey" class="nearestSearch">
        <p
          class="nearestSearchTitle display-flex flex-direction-column justify-content-flex-center"
        >
          <span>最近搜索</span>
        </p>
        <ul class="keywordGroup display-flex flex-direction-row flex-wrap-wrap">
          <li
            v-if="item.name"
            v-for="(item,index) in nearestSearchArr"
            :key="index"
            class="keyword display-flex flex-direction-row align-items-center justify-content-flex-center"
            @click="selectNearestKeyWord(item.name)"
          >
            <span>{{(item.name&&item.name!=null)?item.name:''}}</span>
          </li>
        </ul>
      </div>
      <div
        v-if="!showKey"
        class="searchResult"
        :style="{backgroundColor:searchData.length>0?'#F5F5F5':'#FFFFFF'}"
      >
        <scroller v-if="searchData.length>0" class="scrollerStyle" :style="{height:tab3LHeight}">
          <div
            class="shopList display-flex flex-direction-column align-items-center justify-content-flex-center"
          >
            <div
              class="shopListItem display-flex flex-direction-row"
              v-for="(item,index) in searchData"
              :key="index"
            >
              <div class="shopItemLeft display-flex flex-direction-column" @click="goDetail(item)">
                <img :src="item.defaultPhoto" alt style="width: 1.84rem;height: 1.84rem" />
                <ul v-show="item.activityGoodsList" class="display-flex flex-direction-row">
                  <li
                    v-for="(a,aIndex) in deWeight(item.activityGoodsList)"
                    :key="aIndex"
                  >{{a.type==1?'特价':'搭赠'}}</li>
                </ul>
              </div>
              <div class="shopItemRight display-flex flex-direction-column">
                <p
                  class="goodsName display-flex flex-direction-column justify-content-flex-center"
                  @click="goDetail(item)"
                >
                  <span>[{{item.brandName}}]{{(item.name&&item.name!=null)?item.name:''}}</span>
                </p>
                <div
                  class="shopItemPackStock indent display-flex flex-direction-row justify-content-flex-justify"
                >
                  <p
                    class="goodsDetail display-flex flex-direction-column align-items-center justify-content-flex-center"
                  >
                    <span>{{item.spec}}</span>
                  </p>
                  <p
                    v-if="item.detail"
                    class="goodsDetailInfo display-flex flex-direction-column align-items-center justify-content-flex-center"
                  >
                    <span>{{item.detail}}</span>
                  </p>
                  <!--<p>库存：{{item.goodsStock>0?item.goodsStock:0}}{{item.baseUnitName}}</p>-->
                </div>
                <div
                  v-for="(j,childJIndex) in item.unitVOList"
                  :key="childJIndex"
                  class="packPriceAndShopping display-flex flex-direction-column justify-content-flex-center"
                >
                  <div class="indent display-flex flex-direction-row justify-content-flex-justify">
                    <div v-if="item.enquiry!=0" class="display-flex flex-direction-row">
                      <p style="color: #666666">询价</p>
                      <span style="color: #999999;">&nbsp; /{{j.name}}</span>
                    </div>
                    <div
                      v-if="item.enquiry==0"
                      class="goodsPackPrice display-flex flex-direction-row align-items-baseline"
                    >
                      <span>￥</span>
                      <p>{{j.unitGoodsPricesVO?(j.unitGoodsPricesVO.discountTaxPrice?j.unitGoodsPricesVO.discountTaxPrice:j.unitGoodsPricesVO.taxPrice):'询价'}}</p>
                      <!-- <span
                        style="color: #999999;"
                      >&nbsp; /{{j.unitGoodsPricesVO?j.unitGoodsPricesVO.unitName:''}}</span> -->
                      <span
                        style="color: #999999;"
                      >&nbsp; /{{j.name}}</span>
                    </div>
                    <div></div>
                    <div class="operation display-flex flex-direction-row" @click.stop>
                      <!--<img style="width: .46rem;height: .46rem;" @click="reduceFn(j,item)" v-show="j.shoppingCartVO&&j.shoppingCartVO.num>0" src="../../../assets/img/cart/-@2x.png" alt="">-->
                      <!--<span v-show="j.shoppingCartVO&&j.shoppingCartVO.num>0">{{j.shoppingCartVO?j.shoppingCartVO.num:''}}</span>-->
                      <!--<img style="width: .46rem;height: .46rem;" @click="addFn(j,item)" src="../../../assets/img/cart/+@2x.png" alt="">-->

                      <img
                        style="width: .46rem;height: .46rem;"
                        @click="reduceFn(j,item)"
                        v-show="j.shoppingCartVO&&j.shoppingCartVO.num>0"
                        src="../../../assets/img/cart/-@2x.png"
                        alt
                      />
                      <p
                        v-show="j.shoppingCartVO&&j.shoppingCartVO.num>0"
                        @click="inputCountFn(j,item)"
                        class="display-flex flex-direction-row align-items-center justify-content-flex-center"
                      >
                        <span
                          :style="{color:((shopZeroSaleState==1&&j.shoppingCartVO.num>j.goodsStock)?'#C9333C':((item.zeroSaleFlag==1&&j.shoppingCartVO.num>j.goodsStock)?'#C9333C':'#000000'))}"
                        >{{j.shoppingCartVO?j.shoppingCartVO.num:''}}</span>
                      </p>
                      <img v-if="j.stockFlag" src="../../../assets/img/order/addSlices2x.png" alt />
                      <img
                        v-if="!j.stockFlag"
                        style="width: .46rem;height: .46rem;"
                        @click="addFn(j,item)"
                        src="../../../assets/img/cart/+@2x.png"
                        alt
                      />
                    </div>
                  </div>
                  <p
                    v-if="j.unitGoodsPricesVO&&j.unitGoodsPricesVO.limitNum"
                    style="font-size: 12px;color:#FFAB91"
                  >
                    优惠限{{j.unitGoodsPricesVO.limitNum}}{{j.unitGoodsPricesVO?j.unitGoodsPricesVO.unitName:''}},
                    第{{j.unitGoodsPricesVO.limitNum+1}}{{j.unitGoodsPricesVO?j.unitGoodsPricesVO.unitName:''}}起
                    ￥{{j.unitGoodsPricesVO.taxPrice}}/{{j.unitGoodsPricesVO?j.unitGoodsPricesVO.unitName:''}}
                  </p>
                </div>
              </div>
            </div>
          </div>
        </scroller>
        <div
          v-else
          class="display-flex flex-direction-row align-items-center justify-content-flex-center"
        >
          <img
            @click="initData"
            style="width: 3rem;margin-top: 2rem"
            src="../../../assets/img/customer/data_empty.png"
            alt
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "searchAndResult",
  data() {
    return {
      shopId: "",
      searchIcon: "\ue630 请输入商品名称查找商品",
      nearestSearchArr: [],
      searchKeyword: "",
      dataArr: [],
      pageNum: 1,
      searchData: [],
      tab3LHeight: "",
      showKey: true,
      shopZeroSaleState: null,
    };
  },
  created() {},
  mounted() {
    this.shopId = this.$route.query.shopId;
    this.shopZeroSaleState = this.$route.query.zeroSaleState;
    this.tab3LHeight = (document.body.clientHeight * 2) / 100 - 0.92 + "rem";
    window["androidCallJs"] = this.androidCallJs;
  },
  methods: {
    deWeight(arr) {
      //对象数组去重
      if (arr == "" || arr == null) {
        arr = [];
      }
      const res = new Map();
      return arr.filter((a) => !res.has(a.type) && res.set(a.type, 1));
    },
    inputChange() {
      this.searchKeyword = this.searchKeyword.replace(
        /[^\a-\z\A-\Z0-9\u4E00-\u9FA5\%&]/g,
        ""
      );
    },
    androidCallJs(val) {
      let initArrKey = [];
      let keyArr = [];
      // this.$vux.toast.text(val);
      if (val && val != "") {
        initArrKey = val.split("@@");
        for (let i = 0; i < initArrKey.length; i++) {
          keyArr.push(JSON.parse(initArrKey[i]));
        }
      }
      this.nearestSearchArr = keyArr;
      // this.$vux.toast.text(keyArr);
    },
    goBack() {
      this.$router.go(-1);
    },
    openShop(item) {
      item.open = !item.open;
    },
    goDetail(item) {
      if (this.$fromApp(this)) {
        // this.$callJava({url:this.$webUrl+"good/operate?from=app&id="+item.id})
        this.$router.push({
          path: "/good/operate",
          query: { goodId: item.id, from: "app" },
        });
      } else {
        this.$router.push({
          path: "/good/operate",
          query: { goodId: item.id },
        });
      }
    },
    goShop(val) {
      if (this.$fromApp(this)) {
        this.$callJava({
          url: this.$webUrl + "purchase/storePage?from=app&id=" + val,
        });
      } else {
        this.$router.push({ path: "/purchase/storePage", query: { id: val } });
      }
    },
    selectNearestKeyWord(val) {
      this.searchKeyword = val;
      this.initData();
    },
    showKeyFn() {
      window["androidCallJs"] = this.androidCallJs;
      this.showKey = true;
    },
    initData() {
      if (this.searchKeyword == "") {
        this.$vux.toast.text("请输入关键词", "middle");
        return;
      }
      this.showKey = false;
      if (this.$fromApp(this)) {
        this.$callJava({ code: 1010, keyName: this.searchKeyword });
        this.$callJava({ code: 1011 });
        window["androidCallJs"] = this.androidCallJs;
      } else {
        console.log(this.searchKeyword);
      }

      let params = {
        goodsName: this.searchKeyword,
        orderType: 0,
        sellerId: this.shopId,
        pageNo: this.pageNum,
        pageSize: 10000,
      };
      this.$ajax.get(
        "replenish/search_goods/list",
        (res) => {
          // console.log(res);
          for (let i = 0; i < res.data.length; i++) {
            for (let j = 0; j < res.data[i].unitVOList.length; j++) {
              if (!res.data[i].unitVOList[j].shoppingCartVO) {
                res.data[i].unitVOList[j].shoppingCartVO = { num: 0 };
              }
              if (
                this.shopZeroSaleState == 0 &&
                res.data[i].zeroSaleFlag == 0
              ) {
                res.data[i].unitVOList[j].stockFlag = false;
              } else {
                if (
                  res.data[i].unitVOList[j].shoppingCartVO.num >=
                  res.data[i].unitVOList[j].goodsStock
                ) {
                  res.data[i].unitVOList[j].stockFlag = true;
                } else {
                  res.data[i].unitVOList[j].stockFlag = false;
                }
              }
            }
          }
          this.searchData = res.data;
        },
        params
      );
      console.log(this.searchData);
    },
    reduceFn(val, item) {
      if (this.shopZeroSaleState == 0 && item.zeroSaleFlag == 0) {
        val.stockFlag = false;
      } else {
        if (val.shoppingCartVO.num >= val.goodsStock + 1) {
          val.stockFlag = true;
        } else {
          val.stockFlag = false;
        }
      }
      let count;
      if (val.shoppingCartVO.num != 0) {
        count = val.shoppingCartVO.num - 1;
        val.shoppingCartVO.num = count;
      }
      this.$ajax.post(
        "replenish/shopping_cart/setting",
        { goodsId: item.id, unitId: val.id, num: count },
        (res) => {
          // console.log(res);
          if (res.code == 200) {
            this.$root.eventHub.$emit("updateCart");
          } else {
            this.$vux.toast.text(res.msg, "center");
          }
        }
      );
    },
    addFn(val, item) {
      if (this.shopZeroSaleState == 0 && item.zeroSaleFlag == 0) {
        val.stockFlag = false;
      } else {
        if (val.shoppingCartVO.num >= val.goodsStock - 1) {
          val.stockFlag = true;
        } else {
          val.stockFlag = false;
        }
      }
      let count;
      if (val.shoppingCartVO.num != 0) {
        count = val.shoppingCartVO.num + 1;
        val.shoppingCartVO.num = count;
      } else {
        count = 1;
        val.shoppingCartVO.num = 1;
      }
      this.$ajax.post(
        "replenish/shopping_cart/setting",
        { goodsId: item.id, unitId: val.id, num: count },
        (res) => {
          // console.log(res);
          if (res.code == 200) {
            this.$root.eventHub.$emit("updateCart");
          } else {
            this.$vux.toast.text(res.msg, "center");
          }
        }
      );
    },
  },
};
</script>

<style lang="less" type="text/less" scoped>
ul > li {
  list-style: none;
}
.scrollerStyle {
  margin-top: 0.92rem;
}
.SARBody {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ffffff;
  .hr {
    width: 100%;
    height: 1px;
    background-color: #ebebeb;
  }
  .header {
    width: 100%;
    height: 0.88rem;
    background-color: #ffffff;
    border-bottom: 1px solid #ebebeb;
    position: fixed;
    left: 0;
    top: 0;
    img {
      width: 0.3rem;
      height: 0.3rem;
      margin-left: 0.3rem;
    }
    input {
      border: none;
      outline: none;
      width: 5.24rem;
      height: 0.64rem;
      font-size: 14px;
      border-radius: 0.32rem;
      background-color: #eeeeee;
      text-indent: 0.3rem;
    }
    span {
      font-size: 15px;
      color: #999999;
      margin-right: 0.3rem;
    }
    .searchInput::placeholder {
      color: #c6c6c6;
      font-size: 15px;
      font-family: "iconfont" !important;
    }
    .searchInput::-moz-placeholder {
      color: #c6c6c6;
      font-size: 15px;
      font-family: "iconfont" !important;
    }
    .searchInput::-webkit-input-placeholder {
      color: #c6c6c6;
      font-size: 15px;
      font-family: "iconfont" !important;
    }
  }
  .resultBox {
    margin-top: 0.88rem;
    .nearestSearch {
      width: 6.9rem;
      height: 100%;
      margin-left: 0.3rem;
      .nearestSearchTitle {
        color: #333333;
        height: 0.8rem;
        font-size: 15px;
        font-weight: bold;
      }
      .keywordGroup {
        .keyword {
          height: 0.5rem;
          border-radius: 0.25rem;
          padding: 0 0.3rem;
          background-color: #eeeeee;
          margin: 0.1rem 0.1rem;
          color: #222222;
          font-size: 12px;
        }
      }
    }
    .searchResult {
      /*background-color: #F5F5F5;*/
      .scrollerStyle {
        .shopList {
          padding-bottom: 1rem;
          .shopListItem {
            width: 7.2rem;
            margin-left: 0.3rem;
            border-bottom: 1px solid #ebebeb;
            padding-bottom: 0.2rem;
            .shopItemLeft {
              width: 2.4rem;
              position: relative;
              img {
                width: 1.84rem;
                height: 1.84rem;
                margin-top: 0.25rem;
              }
              ul {
                position: absolute;
                top: 0.2rem;
                left: 0;
                li {
                  margin-right: 0.1rem;
                  color: #ffffff;
                  font-size: 12px;
                  background-color: #fc6e51;
                  padding: 0.03rem 0.08rem;
                }
              }
            }
            .shopItemRight {
              width: 4.8rem;
              .goodsName {
                color: #333333;
                font-size: 15px;
                margin: 0.2rem 0 0.1rem;
                /*height: .8rem;*/
                /*line-height: .8rem;*/
                span {
                  display: -webkit-box;
                  -webkit-box-orient: vertical;
                  -webkit-line-clamp: 2;
                  overflow: hidden;
                  width: 4.7rem;
                }
              }
              .indent {
                height: 0.6rem;
                padding-right: 0.3rem;
                .goodsPackPrice {
                  color: #fb6e52;
                  span {
                    font-size: 12px;
                  }
                  p {
                    font-size: 18px;
                  }
                }
                .goodsDetailInfo {
                  color: #999999;
                  height: 0.3rem;
                  line-height: 0.3rem;
                  background-color: #ffffff;
                  border-radius: 0.15rem;
                  padding: 0 0.1rem;
                  margin-top: 0.05rem;
                  font-size: 10px;
                  margin-left: 0.15rem;
                  border: 1px solid #eeeeee;
                }
                .goodsDetail {
                  color: #999999;
                  height: 0.32rem;
                  line-height: 0.32rem;
                  background-color: #eeeeee;
                  border-radius: 0.16rem;
                  padding: 0 0.15rem;
                  margin-top: 0.05rem;
                  font-size: 10px;
                }
                .operation {
                  img {
                    width: 0.46rem;
                    height: 0.46rem;
                  }
                  span {
                    margin: 0 0.15rem;
                  }
                }
              }
              .packPriceAndShopping {
                margin-top: 0.1rem;
                border-bottom: 1px solid #ebebeb;
              }
              .packPriceAndShopping:last-child {
                border-bottom: none;
              }
            }
          }
        }
      }
    }
  }
}
</style>
